<template>
  <v-dialog v-model="dialog" max-width="800px" scrollable>
    <v-card>
      <v-card-title class="d-flex align-center">
        <v-icon left color="primary">mdi-eye</v-icon>
        日志详情
        <v-spacer />
        <v-btn icon="mdi-close" variant="text" @click="close" />
      </v-card-title>
      <v-divider />
      <v-card-text>
        <v-row class="mb-2">
          <v-col cols="12" md="6"><b>日志ID：</b> {{ logData?.id }}</v-col>
          <v-col cols="12" md="6"><b>日志类型：</b> {{ getLogTypeName(logData?.logType) }}</v-col>
          <v-col cols="12" md="6"><b>日志等级：</b> {{ getLogLevelName(logData?.level) }}</v-col>
          <v-col cols="12" md="6"><b>被操作的系统模块：</b> {{ getModuleTypeName(logData?.moduleId) }}</v-col>
          <v-col cols="12" md="6"><b>操作人账号：</b> {{ logData?.username }}</v-col>
          <v-col cols="12" md="6"><b>操作人名称：</b> {{ logData?.realName }}</v-col>
          <v-col cols="12" md="6"><b>操作类型：</b> {{ getOperationTypeName(logData?.operationType) }}</v-col>
          <v-col cols="12" md="6"><b>运行时间(ms)：</b> {{ logData?.runTime }}</v-col>
          <v-col cols="12" md="6"><b>日志描述：</b> {{ logData?.description }}</v-col>
          <v-col cols="12" md="6"><b>执行方法：</b> {{ logData?.method }}</v-col>
          <v-col cols="12" md="6"><b>请求参数：</b> {{ logData?.args }}</v-col>
          <v-col cols="12" md="6"><b>返回结果：</b> {{ logData?.returnValue }}</v-col>
        </v-row>
      </v-card-text>
      <v-divider />
      <v-card-actions>
        <v-spacer />
        <v-btn color="primary" variant="text" @click="close">关闭</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import type { DictItem } from '@/utils/dict'

interface LogItem {
  id: string
  logType: string
  level: string
  moduleId: string
  username: string
  realName: string
  operationType: string
  runTime: string
  createTime: string
  description: string
  method: string
  args: string
  returnValue: string
}

const props = defineProps<{
  modelValue: boolean
  logData?: LogItem | null
  logTypeDict: DictItem[]
  logLevelDict: DictItem[]
  operationTypeDict: DictItem[]
  moduleTypeDict: DictItem[]
}>()

const emit = defineEmits(['update:modelValue'])
const dialog = computed({
  get: () => props.modelValue,
  set: v => emit('update:modelValue', v)
})

const close = () => {
  dialog.value = false
}

const getLogTypeName = (val?: string) => {
  const found = props.logTypeDict.find(item => item.dictValue === val)
  return found ? found.dictName : val
}
const getLogLevelName = (val?: string) => {
  const found = props.logLevelDict.find(item => item.dictValue === val)
  return found ? found.dictName : val
}
const getOperationTypeName = (val?: string) => {
  const found = props.operationTypeDict.find(item => item.dictValue === val)
  return found ? found.dictName : val
}
const getModuleTypeName = (val?: string) => {
  const found = props.moduleTypeDict.find(item => item.dictValue === val)
  return found ? found.dictName : val
}
</script>

<style scoped>
.v-card-title {
  position: sticky;
  top: 0;
  z-index: 1;
}
</style>
